<!DOCTYPE html>
<html>
<head>   
    <title>profilesEdit</title>  
    <style type="text/css">
        html, body {
            font-size: 14px;  background-color: #f1f1f1;overflow: hidden;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="../stylesheets/codemirror/codemirror.css"/>
    <link type="text/css" rel="stylesheet" href="../stylesheets/codemirror/dracula.css"/>
    <link type="text/css" rel="stylesheet" href="../stylesheets/codemirror/foldgutter.css"/>
    <script type="text/javascript" src="../javascript/page/Child.js"></script>
    <script type="text/javascript" src="../javascript/lib/yaml.js"></script>
    <script type="text/javascript" src="../javascript/codemirror/codemirror.js"></script>
    <script type="text/javascript" src="../javascript/codemirror/yaml.js"></script>
    <script type="text/javascript" src="../javascript/codemirror/foldcode.js"></script>
    <script type="text/javascript" src="../javascript/codemirror/foldgutter.js"></script>
    <script type="text/javascript" src="../javascript/codemirror/comment-fold.js"></script>
    <script type="text/javascript" src="../javascript/codemirror/matchbrackets.js"></script>
    <script type="text/javascript" src="../javascript/codemirror/brace-fold.js"></script>    
</head>
<body onload="docLoaded();">
    <div>
        <div class="title_bar">
            YAMLEditor
        </div>   
        <div class="hline"></div>
        <div class="panel">
            <textarea class="form-control" id="codeEditor" name="codeEditor" style=" display: none;"></textarea> 
        </div>     
        <div id="editForm" class="query_form" style="text-align: center;">
            <template>  
                <el-form :inline="true" :model="searchData" class="demo-form-inline" size="small">
                    <el-form-item>
                        <el-button type="primary" v-on:click="close" plain>Close</el-button>
                        <el-button type="primary" @click="loadData" icon="el-icon-refresh" plain>Reload</el-button> 
                        <el-button type="primary" @click="editSubmit">Save</el-button>                           
                        <el-button type="primary" @click="handleRefresh" icon="el-icon-refresh" plain>Publish</el-button>                                                       
                    </el-form-item>
                </el-form>
            </template>
        </div> 
    </div>     
    <script type="text/javascript">
        var router = startPage();
        function docLoaded() {
            var applicationId = getURLParams("appId");
            var applicationName = getURLParams("appName");
            var applicationProfile = getURLParams("profile");
            var applicationLabel = getURLParams("label");           
            var editor = CodeMirror.fromTextArea($e("codeEditor"), {
                mode: "text/x-yaml", //mode: "text/javascript", //mode: "application/json", 
                "theme":"dracula",                          
                "gutters":["CodeMirror-lines","CodeMirror-linenumbers", "CodeMirror-foldgutter"], 
                foldGutter: true,        
                lines: true,            
                lineNumbers: true,
                lineWrapping: true,	  
                styleActiveLine: true,
                matchBrackets: true,  
                indentUnit: 1,   
                tabSize: 2,          
                readOnly: false
            });editor.setSize('940px', '450px');                   
            //load data
            var vApp = new Vue({el: '#editForm', data: {                              
                    searchData:{
                        appId: applicationId,                  
                        profile:applicationProfile,
                        label:applicationLabel                      
                    },
                    updateData:{
                        appId: applicationId,                  
                        profile:applicationProfile,
                        label:applicationLabel,
                        yaml:""                     
                    }
                },
                methods: {  
                    close:function(event){
                        router.closeDialog(document.title);
                    },                 
                    loadData:function(event){  
                        //var listApi = apiConfigProfilesList(this,router.authInfo,JSON.stringify(this.searchData));  
                        var yamlApi = apiConfigProfilesYaml(this,router.authInfo,JSON.stringify(this.searchData));                                             
                        httpPost(yamlApi).success(function(res,context){  
                            var resData = getResult(res,context);
                            if(!resData){
                                return;
                            }
                            editor.setValue(base64decode(resData));//YAML.stringify(resData));   
                        }).then(function(status, res, context){context.$message.error(res);});
                    },                  
                    editSubmit:function(event){
                        try{
                            var objs = YAML.parse(editor.getValue());      
                            this.updateData.yaml = base64encode(editor.getValue());
                            var yamlUpdateApi = apiConfigProfileYamlUpdate(this,router.authInfo,JSON.stringify(this.updateData));     
                            httpPost(yamlUpdateApi).success(function(res,context){  
                                checkResult(context,res,false);
                            }).then(function(status, res, context){checkResult(context,res,true);});                    
                        }catch(e){                           
                            this.$message.error(e && e.message);
                        }            
                    },
                    handleRefresh:function(event){                      
                        var apiRequest = apiConfigProfileRefresh(this,router.authInfo,JSON.stringify(this.searchData));
                        httpPost(apiRequest).success(function(res,context){                          
                            checkResult(context,res,false);
                        }).then(function(status, res, context){checkResult(context,res,true);});
                    }
                }            
            }); vApp.loadData();//init end.
        } 

        function getResult(res,vApp){
            var resObj = JSON.parse(res); 
            if(resObj.code != SUCCESS_CODE){
                vApp.$message.error(resObj.message+","+resObj.code);
                return null;
            }    
            return resObj.data;
        }

        function checkResult(vApp, res, isErr){            
            if(isErr){
                vApp.$message.error(res);
                return 0;
            }
            var resObj = JSON.parse(res); 
            if(resObj.code == SUCCESS_CODE){
                vApp.$message({type: 'success', message: resObj.message});
                return 1;
            }
            vApp.$message.error(resObj.message+","+resObj.code);
            return 0;
        }
    </script>
</body>
</html>
